<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>查看订舱单 | </title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="font/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
   <!-- <link href="css/nprogress.css" rel="stylesheet">-->

    <!-- Custom Theme Style -->
    <link href="css/custom.min.css" rel="stylesheet">

</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div  id="head">

        </div>


        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left">
                        <h3>查看订舱单</h3>
                    </div>
                    <div class="title_right" >
                        <button type="submit" class="btn btn-primary"style="margin-right: 50px;margin-top:2px;float: right"  onclick="window.print();">打印</button>
                    </div>

                </div>

                <div class="clearfix"></div>

                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">

                            <div class="x_content">

                                    <span class="section">订舱单信息</span>

                                    <div id="bbb">
                                    <div class="row" style="margin-top: 15px;margin-left: 100px">
                                        <label class="col-sm-1 control-label" style="text-align: right;" for="bookingno" readonly="">订舱申请号：</label>
                                        <div class="col-sm-2">
                                            <input class="form-control" id="bookingno" type="text" />
                                        </div>
                                        <label class="col-sm-1 control-label" style="text-align: right;" for="bookingcarrier">承运人：</label>
                                        <div class="col-sm-2">
                                            <input class="form-control"  id="bookingcarrier" type="text"   />
                                        </div>
                                        <label class="col-sm-1 control-label" style="text-align: right;" for="receiver">收货人：</label>
                                        <div class="col-sm-2">
                                            <input class="form-control" id="receiver" type="text" />
                                        </div>
                                    </div>
                                        <div class="row" style="margin-top: 15px;margin-left: 100px">
                                            <label class="col-sm-1 control-label" style="text-align: right;" for="notifyparty">通知人：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control" id="notifyparty" type="text" />
                                            </div>
                                            <label class="col-sm-1 control-label" style="text-align: right;" for="shipinno">合作公司编号：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control" id="shipinno" type="text"  />
                                            </div>
                                            <label class="col-sm-1 control-label" style="text-align: right;" for="receivingplace">收货地址：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control"  id="receivingplace" type="text" />
                                            </div>

                                        </div>
                                        <div class="row" style="margin-top: 15px;margin-left: 100px">
                                            <label class="col-sm-1 control-label" style="text-align: right;" for="loadingport">装货地点：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control"  id="loadingport" type="text" />
                                            </div>
                                            <label class="col-sm-1 control-label" style="text-align: right;" for="dischargeport">卸货地点：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control" id="dischargeport" type="text" />
                                            </div>
                                            <label class="col-sm-1 control-label" style="text-align: right;" for="createtime">创建时间：</label>
                                            <div class="col-sm-2">
                                                <input class="form-control"  id="createtime" type="text" />
                                            </div>
                                        </div>


                                    </div>

                                    </div>



                                    </div>
                        <div class="x_panel">
                            <div class="x_title">
                                <h2 class="btn btn-primary">预排柜信息 </h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">

                                <table id="table1" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>订舱号</th>
                                        <th>预排柜号</th>
                                        <th>SO  NO</th>
                                        <th>船名</th>
                                        <th>航次</th>
                                        <th>箱型</th>
                                        <th>箱量</th>
                                        <th>尺寸</th>
                                        <th>ETD</th>
                                        <th>ETA</th>
                                        <th>截关时间</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr>
                                        <td id="bookingReqNo"></td>
                                        <td id="yconId"></td>
                                        <td id="sono"></td>
                                        <td id="shipsname"></td>
                                        <td id="shipscount"></td>
                                        <td id="ycontype"></td>
                                        <td id="yconamount"></td>
                                        <td id="yconsize"></td>
                                        <td id="etd"></td>
                                        <td id="eta"></td>
                                        <td id="closingTime"></td>
                                    </tr>
                                    </tbody>

                                </table>
                                <span id="tableError" style="display: none;color: red;font-size: 20px;margin-left:550px"></span>
                            </div>
                        </div>
                    </div>
                    <!-- /page content -->

                    <!-- footer content -->
                    <!-- /footer content -->
                </div>
            </div>


                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>

            <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
    </div>
</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!-- validator -->

<!-- Custom Theme Scripts -->


<!-- validator -->
<script>
    function   formatDate(now)   {
        var   year=now.getFullYear();
        var   month=now.getMonth()+1;
        var   date=now.getDate();
        var  hours=now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        return   year+"年"+month+"月"+date+"日    "+hours+"时"+minutes+"分"+seconds+"秒";
    }
    var $token=window.sessionStorage.getItem('token');
    var url = window.location.href;
    var termsId = url.split("=")[1];

    $.ajax({
        type:"post",
        xhrFields:{withCredentials:true},
        url:"http://localhost:8081/booking/showCheckBooking",
        dataType:"json",
        data:{"orderNumber":termsId,"token":$token},
        success:function (data) {
            var   $createtime=new   Date(data.createtime);
            if (data.yconno==null){
                $("#bookingno").val(data.bookingno);
                $("#bookingcarrier").val(data.bookingcarrier);
                $("#receiver").val(data.receiver);
                $("#notifyparty").val(data.notifyparty);
                $("#shipinno").val(data.shipinno);
                $("#receivingplace").val(data.receivingplace);
                $("#loadingport").val(data.loadingport);
                $("#dischargeport").val(data.dischargeport);
                $("#createtime").val(formatDate($createtime));
                $("#table1").hide();
                $("#tableError").show();
                $("#tableError").html("此订单没有生成预排柜,暂时查询不到数据！");
            }else {
                $("#bookingno").val(data.bookingno);
                $("#bookingcarrier").val(data.bookingcarrier);
                $("#receiver").val(data.receiver);
                $("#notifyparty").val(data.notifyparty);
                $("#shipinno").val(data.shipinno);
                $("#receivingplace").val(data.receivingplace);
                $("#loadingport").val(data.loadingport);
                $("#dischargeport").val(data.dischargeport);
                $("#createtime").val(formatDate($createtime));
                $.ajax({
                    type:"post",
                    xhrFields:{withCredentials:true},
                    url:"http://localhost:8081/booking/showCheckYcon",
                    dataType:"json",
                    data:{"yconId":data.yconno,"token":$token},
                    success:function (ycon) {
                        var   $etd=new   Date(ycon.etd);
                        var   $eta=new   Date(ycon.eta);
                        var   $closingTime =new   Date(ycon.closingTime);
                            $("#bookingReqNo").html(ycon.bookingReqNo);
                            $("#yconId").html(ycon.yconId);
                            $("#sono").html(ycon.sono);
                            $("#shipsname").html(ycon.shipsname);
                            $("#shipscount").html(ycon.shipscount);
                            $("#ycontype").html(ycon.ycontype);
                            $("#yconamount").html(ycon.yconamount);
                            $("#yconsize").html(ycon.yconsize);
                            $("#etd").html(formatDate($etd));
                            $("#eta").html(formatDate($eta));
                            $("#closingTime").html(formatDate($closingTime));
                    },
                    error:function(){
                        alert("异常");
                    }
                });

            }
        },
        error:function(){
            alert("异常");
        }
    });




    // initialize the validator function
    // validator.message.date = 'not a real date';
    $('#head').load("head.html");
    // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
    // $('form')
    //     .on('blur', 'input[required], input.optional, select.required', validator.checkField)
    //     .on('change', 'select.required', validator.checkField)
    //     .on('keypress', 'input[required][pattern]', validator.keypress);

    $('.multi.required').on('keyup blur', 'input', function() {
        validator.checkField.apply($(this).siblings().last()[0]);
    });

    $('form').submit(function(e) {
        e.preventDefault();
        var submit = true;

        // evaluate the form using generic validaing
        if (!validator.checkAll($(this))) {
            submit = false;
        }

        if (submit)
            this.submit();

        return false;
    });
</script>
<!-- /validator -->
</body>
</html>